import React, { Suspense } from "react";
import { Spin } from "antd";

import { Route, Switch, Redirect } from "react-router-dom";
import RedirectRouterView from "./RedirectRouterView";
import menus from "./menus";

function routerView() {
  const renderRoute = (menus) => {
    return menus.map((item) => {
      if (item.children) {
        return renderRoute(item.children);
      } else {
        return (
          <Route
            path={item.path}
            key={item.path}
            exact
            component={item.component}
          />
        );
      }
    });
  };
  return (
    <Suspense
      fallback={
        <div className="loading">
          <Spin size="large" />
        </div>
      }
    >
      <Switch>
        <Redirect path="/" exact to="/home" />
        {renderRoute(menus)}
        <RedirectRouterView />
      </Switch>
    </Suspense>
  );
}

export default routerView;
